<template>
<view class="scanCenter">
    <view class="scan">
        <u--input placeholder="请输入兑换码" border="surround" v-model="value"></u--input>
        <!-- <u-icon name="scan" @click="openScan" color="#C0C4CC" size="42"></u-icon> -->
    </view>
    <view class="button" v-if="!showBtn" :style="{backgroundColor: `${value ? objColor2.btnColor || defaultColor : null}`,color: `${value ? '#FFF' : null}`,}" @click="toCheck">确定</view>
    <view class="button" v-else>确定</view>
</view>
</template>

<script>
import {
    voucherExchangeCode
} from "@/api/marketing/coupon";
var scanCode = require("@/utils/scanCode");
export default {
    data() {
        return {
            defaultColor: uni.getStorageSync("defaultColor_Green"),
            value: "",
            showBtn: false
        };
    },
    methods: {
        change() {},
        openScan() {
            // 允许从相机和相册扫码
            if (uni.getStorageSync("token")) {
                scanCode.stateOfCharge();
            } else {
                scanCode.scanCode();
            }
        },
        toCheck() {
            this.showBtn = true
            voucherExchangeCode(this.value).then((res) => {
                this.showBtn = false
                if (res.code == 200) {
                    uni.showToast({
                        title:res.data.msg,
                        icon: "none",
                    });
                    // setTimeout(() => {
                    //     uni.switchTab({
                    //         url: '/pages/my/my'
                    //     })
                    // }, 800);
                }
            }).catch((err)=>{
                this.showBtn = false
            });
        },
    },
};
</script>

<style lang="less" scoped>
.scanCenter {
    width: 100%;
    min-height: 100vh;
    background: #f5f7fa;
    padding-top: 40rpx;
    box-sizing: border-box;
}

.scan {
    width: 94%;
    margin: 0rpx auto;
    height: 116rpx;
    background: linear-gradient(360deg,
            #ffffff 0%,
            #ffffff 31%,
            #f4f6f8 99%,
            #f4f6f8 100%);
    box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 178, 0.2392);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    border: 2rpx solid #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    /deep/ .u-input {
        width: 85%;
        height: 100%;
        border: 0;
        padding-left: 20rpx;
        box-sizing: border-box;
    }

    /deep/ .u-icon {
        width: 15%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
}

.button {
    width: 92%;
    height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    margin: 40rpx auto;
    background: #c0c4cc;
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    font-size: 30rpx;
    font-weight: 400;
    color: #ffffff;
}
</style>
